<%@page pageEncoding="UTF-8" contentType="text/html; UTF-8" isELIgnored="false" %>
<script type="text/javascript">
    $.fn.datebox.defaults.formatter = function(date){
        var y = date.getFullYear();
        var m = date.getMonth()+1;
        var d = date.getDate();
        return y+'/'+m+'/'+d;
    }


    function uploadAddProductLogo(){
        var fileObj = document.getElementsByName("addProductCover")[0].files[0];
        if(fileObj && fileObj.size > 0){
            var formData = new FormData();
            formData.append("logoFile", fileObj); //加入文件对象
            console.log(formData);
            $.ajax({
                type:"POST",
                url:"${pageContext.request.contextPath}/back/file/uploadCover",
                data:formData,
                processData:false,
                contentType:false,
                success:function(data){
                    console.log(data.message);
                    $("#addProductlogo").attr("src",data.message);
                }
            });
        }
    }
</script>
<form id="saveProductForm" method="post" enctype="multipart/form-data" style="text-align: center;margin-top: 30px;">
    <table  style="display: inline;width: 600px;margin-right: 50px;position: relative;top: -160px;">
        <tr>
            <td>名称:</td>
            <td><input class="easyui-textbox" name="name" data-options="width:250,height:40,required:true" /></td>
        </tr>
        <tr>
            <td>介绍:</td>
            <td><input class="easyui-textbox" name="introduction" data-options="width:250,height:100,multiline:true" /></td>
        </tr>
        <tr>
            <td>封面:</td>
            <td>
                <img style='width:80px;height:80px;border-radius:50%;display:block;' id="addProductlogo"/><br/>
                <input id="addProductlogoFile" class="easyui-filebox" name="addProductCover" data-options="width:250,height:40,onChange:uploadAddProductLogo,buttonText:'选择文件',required:true" /></td>
        </tr>
        <tr>
            <td>轮播图:</td>
            <td>
                <input id="addProductTop" class="easyui-filebox" name="addProductTop" data-options="width:250,height:40,buttonText:'选择文件',required:true,multiple:true" /></td>
        </tr>
        <tr>
            <td>详情图:</td>
            <td>
                <input id="addProductDown" class="easyui-filebox" name="addProductDown" data-options="width:250,height:40,buttonText:'选择文件',required:true,multiple:true" /></td>
        </tr>
        <tr>
            <td>商品源链接:</td>
            <td><input class="easyui-textbox" name="link" data-options="width:250,height:40,required:true,value:'http://'" /></td>
        </tr>
        <tr>
            <td>推荐人:</td>
            <td><input class="easyui-textbox" name="recommender" data-options="width:250,height:40,required:true" /></td>
        </tr>
        <tr>
            <td>推荐时间:</td>
            <td><input class="easyui-datebox" name="date" data-options="width:250,height:40,panelWidth:250,required:true" /></td>
        </tr>

        <tr>
            <td>小编评语:</td>
            <td><input class="easyui-textbox" name="comment" data-options="width:250,height:100,multiline:true" /></td>
        </tr>
        <tr>
            <td>官网详细:</td>
            <td><input class="easyui-textbox" name="detail" data-options="width:250,height:100,multiline:true" /></td>
        </tr>
        <tr>
            <td>上下架:</td>
            <td><input class="easyui-switchbutton" name="productStatus" data-options="onText:'上',offText:'下'" checked></td>
        </tr>
        <tr>
            <td>供货商:</td>
            <td><input id="ctSupplierProduct" name="supplierid" /></td>
        </tr>
        <tr>
            <td>分类:</td>
            <td><input id="ctCatelogProduct" name="catelogId" /></td>
        </tr>
        <tr>
            <td>品牌:</td>
            <td><input id="ctBrandProduct" name="brandId" /></td>
        </tr>
    </table>
    <div style="display: inline-block; height: 800px;width: 2px;background-color: #EEEEEE;position: absolute;"></div>
    <table  style="display: inline;width: 800px;margin-left: 50px;">

        <tr id="dataTr">
            <td>
                <table id="ttValue" style="width:600px;height:200px"
                       title="属性"
                       singleSelect="true">
                    <thead>
                    <tr>
                        <th field="size" width="80" editor="{type:'textbox',options:{required:true}}">尺寸</th>
                        <th field="weight" width="80" editor="{type:'numberbox',options:{required:true,min:0,precision:2,suffix:'kg'}}">重量</th>
                        <th field="color" width="80" align="right" editor="{type:'textbox',options:{required:true}}">颜色</th>
                        <th field="originPrice" width="80" align="right" editor="{type:'numberbox',options:{required:true,min:0,precision:2,suffix:'￥'}}">原价</th>
                        <th field="discount" width="80" align="right" editor="{type:'numberbox',options:{required:true,min:0,max:100,precision:2,suffix:'%'}}">折扣</th>
                        <th field="count" width="80" editor="{type:'numberbox',options:{required:true,min:0}}">库存</th>
                        <th field="image" width="118" data-options="formatter:imageFormatter" editor="{type:'filebox',options:{name:'image',required:true,buttonText:'选择文件',onChange:uploadSku}}">样图</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </td>
        </tr>

    </table>

</form>
<script type="text/javascript">

    $(function () {
        $('#ttValue').edatagrid({
                data:[
                    {"size":"","weight":0,"color":"","originPrice":0,"discount":100,"count":0,"image":""},
                ],
            toolbar: [{
                iconCls: 'icon-add',
                handler: function(){
                    //$('#ttValue').edatagrid("editRow",0);
                    if($('#ttValue').edatagrid("validateRow",0)){
                    ++index;
                    $('#ttValue').edatagrid("addRow",{index:index,row:{"size":"","weight":0,"color":"","originPrice":0,"discount":100,"count":0,"image":""}});
                }}
            },{
                iconCls: 'icon-remove',
                handler: function(){
                    var j = $('#ttValue').edatagrid("getRows").length-1;
                    if(j>=0){$('#ttValue').edatagrid("deleteRow",j);}
                }
            }],
            autoSave:true
    });

        $('#ttValue').edatagrid("editRow",0);

        $('#ctCatelogProduct').combobox({
            valueField: 'id',
            textField: 'name',
            required:true,
            url: '${pageContext.request.contextPath}/back/catelog/findAllLastCatelog',
            width:250,
            height:40,
        });
        $('#ctBrandProduct').combobox({
            valueField: 'id',
            textField: 'name',
            required:true,
            url: '${pageContext.request.contextPath}/back/brand/findAllBrand',
            width:250,
            height:40,
        });
        $('#ctSupplierProduct').combobox({
            valueField: 'id',
            textField: 'name',
            required:true,
            url: '${pageContext.request.contextPath}/back/supplier/findAllSupplier',
            width:250,
            height:40,
        });
    });
    function vali(){
        var flag = true;
        var data = $('#pg'+index).propertygrid("getData").rows;
        $.each(data,function (index,item) {
            if(!item.value){
                flag=false;
            }
        });
        if(!$("#yangFile"+index).filebox("getValue"))flag = false;
        return flag;
    }
    function getData(i){
        return $('#pg'+i).propertygrid("getData").rows;
    }

</script>